<template>
    <div class="location">
        <div class="head">
            <van-nav-bar
            title="位置信息"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>
        <div class="contentbox">
            <van-cell class="search">
                <van-field placeholder="搜索" class="ipt"  @input="searchs" v-model ="search"/>
            </van-cell>
            <div class="addcount">
                <div class="result" v-for="(item,index) in list" :key="index" @click="location(item)" >
                    {{item.title}}
                </div>
            </div>
            <div class="map">
                <p> 显示当前位置: </p>
                <div id="allmap"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState,mapMutations } from "vuex";
export default {
    data() {
        return {
            search:"",
            list:"",
            map:"",
        };
    },
    computed: {
        ...mapState(["cityInfo"]),
       ...mapMutations(['setInfo'])
    },
    mounted() {
            var _this=this;
            var map = new BMap.Map("allmap");    // 创建Map实例
            this.map = map
            map.centerAndZoom(new BMap.Point(this.cityInfo.longitude,this.cityInfo.latitude), 15);  // 初始化地图,设置中心点坐标和地图级别
            // 添加标注
            var mk = new BMap.Marker(this.cityInfo.point);
			map.addOverlay(mk);
            map.panTo(this.cityInfo.point);
             var options = {
                onSearchComplete: function(results){
                    // 判断状态是否正确
                    if (local.getStatus() == BMAP_STATUS_SUCCESS){
                        _this.list = results.Hr;
                       console.log(results)
                    }
                }
            };
            var local = new BMap.LocalSearch(map, options);
            local.search(this.search);
    },
    methods: {
        onClickLeft(){
                this.$router.go(-1);
                this.$store.commit('setInfo',"")
        },
        searchs(){
            var _this = this;
            var options = {
                onSearchComplete: function(results){
                    // 判断状态是否正确
                    if (local.getStatus() == BMAP_STATUS_SUCCESS){
                        _this.list = results.Hr;
                    }
                }
            };
            var local = new BMap.LocalSearch(this.map, options);
            local.search(this.search);
        },
        location(item){
            this.$store.commit('setInfo',item);
            this.$router.push({path:'/'})
        }
       
    },

};
</script>

<style scoped lang="scss">

.map{
    position: fixed;
    left: 0;
    bottom: 10px;
    width: 100%;
    // height: 200px;

    p{
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        padding: .26667rem;
        text-align: left;
    }

    #allmap{
        height: 200px;
    }
}
.head {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}
.contentbox {
    margin-top: 50px;
    
    .ipt{
        border: 2Px solid #eee;
    }
}
.addcount{
    height: calc(100% -300px);
    overflow: auto;

    .result{
        padding: 10px 15px;
        text-align: left;
    }
}
</style>
